<template>
  <div class="app-container">
    <el-form v-enterToNext="true" ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="110px" size="mini" status-icon >
      <el-form-item label="请选择员工" prop="Staff">
        <el-select v-model="postForm.Staff" filterable clearable placeholder="请选择" size="mini" @click="selectStaff($event)">
          <el-option
            v-for="item in staffs"
            :key="item.Name"
            :label="item.Name"
            :value="item.Name"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="meduium" @click="bindQRCode">生成二维码</el-button>
      </el-form-item>
    </el-form>

    <div id="qrCode" ref="qrCodeDiv"/>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { getStaff } from '@/api/company'
export default {
  data() {
    return {
      staffs: [],
      postForm: {
        Staff: ''
      },
      name: 'qrCode',
      rules: {
        Staff: [
          { required: true, message: '请选择员工', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      //      获取员工
      getStaff().then(response => {
        console.log(response)
        this.staffs = response.map(item => {
          return {
            ID: item.Name,
            Name: item.Name
          }
        })
      })
    },
    // 选择员工时赋值
    selectStaff(event) {
      this.postForm.Staff = event.target.value
    },
    bindQRCode() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.qrCodeDiv.innerHTML = ''
          new QRCode(this.$refs.qrCodeDiv, {
            text: 'http://18305946191.qicp.vip:27661/order/sales/delivery?user=' + this.postForm.Staff,
            width: 160,
            height: 160,
            colorDark: '#333333', // 二维码颜色
            colorLight: '#ffffff', // 二维码背景色
            correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
          })
        }
      })

      console.log('你选中的员工是：' + this.postForm.Staff)
    }
  }

}
</script>

